<template>
    <!-- Element Plus顶栏菜单 -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
      
    >
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">图片题录入</el-menu-item>
      <el-menu-item index="4">元数据</el-menu-item>
      <el-menu-item index="5">系统设置</el-menu-item>
      <el-menu-item index="3">关于</el-menu-item>
    </el-menu>
    <main>
      <!-- 路由视图 -->
      <router-view />
    </main>
    <footer>
      <p>© 2023 Question Bank System</p>
    </footer>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const activeIndex = ref('1')

watch(() => route.path, (newPath) => {
  switch (newPath) {
    case '/':
      activeIndex.value = '1'
      break
    case '/image-question-input':
      activeIndex.value = '2'
      break
    case '/about':
      activeIndex.value = '3'
      break
    case '/metadata':
      activeIndex.value = '4'
      break
    case '/settings':
      activeIndex.value = '5'
      break
  }
})

const handleSelect = (key: string) => {
  switch (key) {
    case '1':
      router.push('/')
      break
    case '2':
      router.push('/image-question-input')
      break
    case '3':
      router.push('/about')
      break
    case '4':
      router.push('/metadata')
      break
    case '5':
      router.push('/settings')
      break
  }
}
</script>

<style>
/* 固定顶栏 */
.el-menu-demo {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

/* 主内容区域 */
main {
  padding-top: var(--menu-height, 54px); /* 使用CSS变量，默认54px */
  height: calc(100vh - var(--menu-height, 54px));
}

main {
 overflow: auto;
}
  

/* 设置菜单高度变量 */
.el-menu-demo {
  --menu-height: 54px;
  height: var(--menu-height);
}

body {
  overflow: hidden;
}

/* 基础样式 */
footer {
  padding: 0px;
  text-align: center;
}
</style>
